<template>
  <div class="app-container">
    <div v-if="total == 0 " style="padding-top: 15%;height: 100%;">
      <div style="padding: 30px; width: 100%; text-align: center; font-size: 26px;">开店流程介绍</div>
      <el-steps style="width: 820px" align-center :active="4">
        <el-step title="创建店铺" description='您可以点击右上角的"创建店铺"按钮开启赚钱之旅'></el-step>
        <el-step title="设置销售渠道" description='创建店铺后,您可以在"店铺设置->销售渠道"菜单下面选择微信小程序或微信公众号渠道售卖商品'></el-step>
        <el-step title="发布商品" description='请在"商品管理->商品信息管理"菜单下添加商品并发布'></el-step>
        <el-step title="店铺装修" description='您可以在"店铺设置->店铺装修"菜单下面选择店铺模板进行装修和数据配置'></el-step>
      </el-steps>
    </div>
    <template v-if="platformInfoList.length > 0">
    <div class="div-platform" v-for="(vo, index) in platformInfoList" :key="index"
      @click="update(platformInfoList[index].platformUid)" title="点击进入店铺">
      <div class="div-platform-name">
        <el-image style="display: inline-block" slot="reference" :src="vo.platformLogUrl" class="image-rows">
          <div slot="error" class="image-slot" style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;border: 1px solid #EEE;border-radius: 50%">
            <span style="color: #999;font-size: 12px;">暂无<br />图片</span>
          </div>
        </el-image>
        <div style="display: inline-block; vertical-align: top; margin-left: 5%">

          <div class="div-platform-name-item2 font_color" style="line-height: 48px;">
            {{ vo.platformName }}
          </div>
        </div>
      </div>
      <div class="div-platform-status">
        <span v-if="vo.dataStatus == 1">店铺状态：有效</span>
        <span v-if="vo.dataStatus == 0">店铺状态：无效</span>
      </div>
       <div class="div-platform-status">
      <span  v-if="vo.isAuth == 0">使用状态：试用</span>
      <span  v-if="vo.isAuth == 1">使用状态：正式</span>
      <span  v-if="vo.isAuth == -1">使用状态：已过期</span>
      <el-link 
        type="primary" 
        :underline="false" 
        style="margin-left: 10px" class="div-platform-button" @click.stop="updateOne(platformInfoList[index].platformUid)" title="点击修改店铺设置">修改</el-link>
      <el-link 
        type="danger" 
        :underline="false" class="div-platform-button" @click.stop="delForm(platformInfoList[index])" z-index="9999" title="点击删除店铺">删除</el-link>
      </div>
      <div class="div-platform-status" style="margin-bottom: 10px;">
        <span>到期时间：{{platformInfoList[index].authTime}}</span>

      </div>
    </div>
    </template>

    <pagination style="margin-right: 20px" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize" @pagination="getList" :page-sizes="pageSizess" />


    <el-dialog title="删除店铺" :visible.sync="open" width="500px" append-to-body :destroy-on-close="true" @close="halog">

      <el-input placeholder="请输入密码" v-model="password" type="password" auto-complete="off">
      </el-input>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormLog">删 除</el-button>
        <el-button @click="cancelLog">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {
    listInfo,
    getpInfo,
    delInfo,
    addInfo,
    updateInfo,
  } from "@/api/platform/info";
  import {
    editUser
  } from "@/api/system/user";
  import {
    refreshTokenTwo
  } from "@/api/login";

  export default {
    name: "showInfo",
    props: {
      mainCategory: {
        type: String,
        default: "",
      },
    },
    data() {
      return {
        password: "",
        uid: null,
        open: false,
        total: 0,
        pageSizess: [9],
        platformInfoList: [],
        total: 0,
        queryParams: {
          pageNum: 1,
          pageSize: 9,
          mainCategory: "",
        },
      };
    },
    watch: {
      mainCategory: function(mainCategory) {
        if (mainCategory != "") {
          this.queryParams.mainCategory = mainCategory;
          this.getList();
        }
      }
    },
    created() {
      if (this.mainCategory != "") {
        this.queryParams.mainCategory = this.mainCategory;
        this.getList();
      }
    },
    methods: {
      getList() {
        listInfo(this.queryParams).then((respone) => {
          this.platformInfoList = respone.rows;
          this.total = respone.total;
          this.total = respone.total;
        });
      },
      update(uid) {
        console.log(0)
        editUser(uid).then((respone) => {
          refreshTokenTwo().then(() => {
            let url = window.location.href;
            let arrS = url.split("platform");
            location.href = arrS[0] + "index";
          });
        });
      },
      updateOne(uid) {

        editUser(uid).then((respone) => {
          refreshTokenTwo().then(() => {
            let url = window.location.href;
            let arrS = url.split("platform");
            location.href = arrS[0] + "store/generalsettings";
          });
        });
      },
      submitFormLog() {
        if (this.password == null || this.password == "") {
          this.$message.error("请输入密码！")
          return;
        }
        let data = {
          platformUid: this.uid,
          pa: this.password
        }
        delInfo(data).then(response => {
          this.$message.success("删除成功");
          this.open = false;
          this.getList();
        })
      },
      cancelLog() {
        this.open = false;
      },
      halog() {
        this.password = "";
        this.uid = null;
      },
      delForm(obj) {
        if (obj.isAuth != "-1") {
          this.$message.error("店铺正在使用,无法删除！");
          return;
        }
        this.uid = obj.platformUid;
        this.open = true;
      },
    },
  };
</script>

<style scoped>
  .div-platform-status {
    font-size: 11px;
    color: #999;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: flex;
    align-items: center;
  }

  .div-platform-name {
    font-size: 14px;
    margin-top: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .div-platform-name-item {
    vertical-align: top;
    line-height: 23px;
  }

  .div-platform-name-item2 {
    display: inline-block;
    vertical-align: middle;
  }
  .el-step__head.is-wait {
    color: #1890ff;
    border-color: #1890ff;
  }

  .app-container {
    height: 100%;
    padding: 0;
    background-color: #fff;
  }

  .div-platform {
    padding-left: 20px;
    padding-right: 16px;
    width: 218px;
    height: 140px;
    /* border: 1px solid #eee; */
    display: inline-flex;
    margin: 20px 10px 20px 40px;
    flex-direction: column;
    justify-content: space-between;
    vertical-align: top;
    cursor: pointer;
    border-radius: 8px;
    box-shadow: 5px 5px 10px 6px rgba(0,0,0,0.05);
    transition: all 0.2s;
  }
  .div-platform:hover {
    transform: translateY(-5px);
  }

  .div-platform-main {
    margin-bottom: 8px;
    margin-top: 5px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .div-platform-main-category {
    color: #bbb;
    height: 1.5em;
    line-height: 1.5em;
    font-size: 12px;
    border-radius: 2px;
    border: 1px solid currentColor;
    display: inline-block;
    padding: 0 3px;
    position: relative;
  }

  .div-platform-button {
    font-size: 12px;
    cursor: pointer;
    margin-left: 15px;
  }

  .pagination-container {
    padding: 0 !important;
    margin-bottom: 35px;
  }
</style>
